<template>
	<div class="open_function">
		<div class="header">
			<div class="top-bar"></div>
			<x-header  class="reds" :left-options="{showBack: false}">
				<div class="btn_tab">
					<button-tab v-model="tab1">
						<button-tab-item :selected="tab1===0">开通功能</button-tab-item>
						<button-tab-item :selected="tab1===1" @on-item-click="getOkFunction">已开通</button-tab-item>
					</button-tab>
				</div>
			</x-header>
		</div>	
		<div class="content" v-if="tab1===0">
			<div class="banner">
				<img src="../../../assets/images/functions/banner1.jpg" alt="" />
			</div>
			<div class="function_lists">
				<div class="function_list" v-for="(item,index) in menuList">
					<div class="function_info">
						<span class="item-icon">
							<img class="icon-img" :src="item.icon" alt="" />
						</span>	
						<span class="item-info">
							<h5>{{item.module_name}}</h5>
							<p>{{item.descript}}</p>
						</span>
					</div>
					<div class="open_btn" @click="openClick(item.is_content_null,item.id,index)">立即开通</div>
					<!--<div v-show="index === current" class="open_btn">已开通</div>-->
				</div>
			</div>
		</div>
		<!-- 已开通 -->
		<div class="content2" v-if="tab1===1">
			<div class="prompt">提示！应用号底部栏按顺序最多显示5个已开通的功能(显示顺序可任意调换)，其它功能将显示在更多列表中，群聊功能只能显示在更多列表中！</div>
				<draggable v-model="okMenuList" :options="options" @start="drag=true" @end="drag=false">
					<div class="function_lists" v-for="(item,index) in iconPreview">
						<div class="function_list">
							<div class="function_list_title">
								<div class="my-handle"><img src="../../../assets/images/functions/edit.png" alt="" /></div>
								<div class="title-icon" @click="handleIcon(item.user_module_id)">
									<img :src="item.icon" alt="" />
								</div>						
								<h5 class="item-text" v-show="isEdit !== index">{{item.user_module_name}}</h5>
								<input @blur="editNameOk(item.user_module_name,item.user_module_id)" 
									v-show="isEdit === index" 
									class="name-edit" 
									type="text"
									autofocus="autofocus"
									v-model="item.user_module_name" />
								<span class="iconfont" @click.stop="editName(index)">
									&#xe608;
								</span>
							</div>
							<div class="function_list_option">
								<!--<div @click.stop="editName" @click="autoClick">
									<img src="../../../assets/images/functions/settings.png" alt="" />
									
								</div>					-->
								<div @click.stop="getDelId(item.user_module_id,index)"><img src="../../../assets/images/functions/delete.png"/></div>
							</div>
						</div>					
					</div>
				</draggable>
			<div class="save_modify" @click="submitUpdate">
				<x-button  type="warn" style="height:1.04rem;background:#f34541;font-size:.32rem;color:#fff;">保存修改</x-button>
			</div>
		</div>
		<moudel-icons v-show="iconShow" @close="iconClose" :icons="iconList" :moudelId="moudelId"></moudel-icons>
		<alert :value="isAlert" :content="'开通成功'"></alert>
	</div>
</template>

<script>
	import Bscroll from "better-scroll"
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import Draggable from 'vuedraggable'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, ButtonTab, ButtonTabItem, XButton ,Alert } from 'vux';
	import MoudelIcons from './components/moudelIcons';
	export default {
		name: 'open_function',
		data() {
			return {
				tab1: 0, //0-开通功能  1-已开通
				colors: [],
				menuList:[],
				iconList:[],	//icon列表
				okMenuList:[],
				iconShow:false, //控制icon组件的显示
				iconInfo:[], 	//所选icon的信息
				pathList:[
					'activityManagement',	//活动列表
					'createActivity',		//创建活动
					'foodDispatch',			//外卖配送
				],
				updateInfo:{},				//最终修改内容
				deleteId    :[],				//要删除模块的ID
				moudelNames  :[],				//要删除模块的名字
				isEdit  :'',				//是否为编辑模式
				isAlert :false,
				options :{
					group:'menu',
					disabled:false,
					animation:50,
					handle:'.my-handle'
				},
				moudelId : '', //当前更改项的ID
				selectId : '',	//用于icon预览用
				path 	 : '',	//用于icon预览用
				current  : -1  //初始索引
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			ButtonTab,
			ButtonTabItem,
			XButton,
			Draggable,
			Alert,
			MoudelIcons
		},
		mounted () {
	        this.getAlreadyList()
	        this.getIconList()
	        if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'),30)
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'),30)
	        }
	        if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'),30)
	        }
	        //setCookie
	        
	 	},
	 	computed:{
	 		iconPreview(){
	 			this.okMenuList.forEach(item =>{
	 				if(!this.selectId){
	 					return this.okMenuList
	 				}
	 				if(this.selectId == item.user_module_id){
	 					let random = Math.random() * 1000
	 					if(!this.path.match("[?]")){
	 						item.icon = this.path + '?rand=' + parseInt(random)
	 					}else{
	 						item.icon = this.path + '&rand=' + parseInt(random)
	 					}					
	 					
	 				}
	 			})
	 			return this.okMenuList
	 		}
	 	},
		methods: {
			//获取icon列表
			getIconList(){
				this.$axiosGet('/api/Moduleaaa/iconList').then( res=>{
					if(res && res.code !== 404){
						this.iconList = res
					}					
				})
			},
			getAlreadyList(){
				let info = {
					userinfo : {
						token : getUrlParam('token') || '',
						uid	  : getUrlParam('uid') 	 || ''
					}
				} 
				info.user_product_id = getUrlParam('user_product_id')  || ''
				this.$axiosPost('/api/moduleaaa',{
					data : JSON.stringify(info)
				}).then(res=>{
					if(res && res.code !== 404){
						this.menuList = res
					}else{
						this.$vux.toast.text('数据获取失败', 'top')
					}
				})

			},
			getOkFunction(){
				this.$axiosGet('/api/moduleaaa/usermodulelist?user_product_id=' + getUrlParam('user_product_id')).then(res=>{
					if(res){
						this.okMenuList = res
					}
				})
			},
			//获取到删除项的ID
			getDelId(id,index){
				if(this.deleteId.indexOf(id) === -1){
					this.deleteId.push(id)
				}
				this.okMenuList.splice(index,1)
				this.$vux.toast.text('已添加至删除列表中', 'top')
			},
			//编辑模块名字
			editName(index){						
				this.isEdit = index			
			},
			homeBack(){
				let u = navigator.userAgent;
			    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
			    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
			    if(isAndroid) {
			        window.WebView.finish()
			    } else if (isiOS) {
			        window.location.href = 'mofing://exitbrowser';
			    }	
			},
			//编辑模块名字
			editNameOk(name,id){
				if(name.length < 1){
					this.$vux.toast.text('名称不能为空', 'top')
					return
				}
				this.moudelNames.unshift({
					name : name,
					id   : id
				})
				this.isEdit = false
			},
			//显示icon组件
			handleIcon(id){	
				this.moudelId = String(id)
				this.iconShow = true
			},
			//关闭icon组件，并接收子组件的参数
			iconClose(param){
				if(!param){
					this.iconShow = false
					return
				}
				this.selectId = param.id
				this.path 	  = param.path
				this.iconInfo.unshift(param)
				this.iconShow = false
			},
			//开通服务，判断有无说明页
			openClick(isContent,id,index){
				isContent = +isContent;
				if(isContent === 0){
					let openInfo = {
						module_id       : id,
						status 	     	: 1,
						user_product_id : getUrlParam('user_product_id'),
						userinfo : {
							token : getUrlParam('token') || '',
							uid   : getUrlParam('uid')   || ''
						}
					}	
					this.$axiosPost('/api/moduleaaa/useredit',{
						data : JSON.stringify(openInfo)
					}).then( res => {
						if(res.status == 1){
							this.getAlreadyList()
	        				this.getOkFunction()
							this.$vux.toast.text(res.msg || '添加模块成功', 'top')
						}else if(res.status === 0){
							this.$vux.toast.text(res.msg || '添加模块失败', 'top')
						}
					})
				}
				if(isContent === 1){
					this.$router.push('/openConfirm/'+ id)
				}
			},
			//将修改的内容一次性提交奥
			submitUpdate(){
				let names = []
				if(this.moudelNames.length){
					names = [this.moudelNames[0]]
					for(let item of this.moudelNames){
						let luck = false
						for(let items of names){
							if(item.id == items.id){
								luck = true
								break
							}
						}
						if(!luck){
							names.push(item)
						}
					}
				}				
				let icons = []
				if(this.iconInfo.length){
					icons = [this.iconInfo[0]]
					for(let item of this.iconInfo){
						let luck = false
						for(let items of icons){
							if(item.id == items.id){
								luck = true
								break
							}
						}
						if(!luck){
							icons.push(item)
						}
					}
				}
				let sortId = []
				this.okMenuList.forEach(item =>{
					sortId.push(item.user_module_id)
				})	
				let updateInfo = this.updateInfo
				updateInfo.delete 		= this.deleteId
				updateInfo.moudel_name = names
				updateInfo.sort        = sortId
				updateInfo.icon        = icons
				updateInfo.status      = 2
				updateInfo.user_product_id      = getUrlParam('user_product_id') || ''
				updateInfo.userinfo = {
						token : getUrlParam('token') || '',
						uid   : getUrlParam('uid')   || ''
				}
				this.$axiosPost('/api/moduleaaa/useredit',{
					data : JSON.stringify(updateInfo)
				}).then(res=>{
					if(res.status == 1){
						this.$vux.toast.text('修改成功', 'top')
						this.getAlreadyList()
						this.deleteId = []
						this.moudelNames = []
						sortId = []
						this.iconInfo = []
					}else if(res.status == 0){
						this.$vux.toast.text('修改失败', 'top')
						this.deleteId = []
						this.moudelNames = []
						sortId = []
						this.iconInfo = []
					}
				})

			}
//			isWechat(){
//				let agent = navigator.userAgent.toLowerCase();
//			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
//			       	this.isWeChat = false			       	
//			       	this.comefrom  = 2
//			    } else {
//			    	this.comefrom  = 1
//			        this.isWeChat = true
//			    }
//			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

	.open_function {
		background: #fff;
		text-align: left;
		.btn_tab{
			margin-top: .1rem;
		}
		.content {
			margin-top: .2rem;
			background: #fff;
			.banner{
				display: flex;
				border-bottom: .16rem solid #efeff4;
				img {
					width: 100%;
					height: 1.72rem;
				}
			}
			.function_lists {
				display: flex;
				justify-content: flex-end;
				flex-flow: row wrap;
				padding-bottom: .5rem;
				.function_list{
					width: 96%;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #dcdcdc;
					padding: .56rem .2rem .16rem 0;
					.function_info{
						.item-icon{
							overflow: hidden;
							display: inline-block;
							height: .4rem;
							width: .4rem;
							.icon-img{
								width: 100%;
								height: 100%;
							}							
						}
						.item-info{
							vertical-align: top;
							display: inline-block;
							h5{
								font-size: .32rem;
								color: #1a1a1a;
							}
							p {
								font-size: .24rem;
								color: #9a9a9a;
								margin-top: .1rem;
							}
						}						
					}
					.open_btn {
						width: 1.5rem;
						height: .58rem;
						font-size: .28rem;
						color: #fff;
						background: #ff4d30;
						border-radius: .05rem;
						text-align: center;
						line-height: .58rem;
					}
				}
			}
			.blank {
				height: .78rem;
				background: #efeff4;
			}
		}
		.content2 {
			position: absolute;
			top: 1.44rem;
			left: 0;
			right: 0;
			bottom: 0;
			margin-bottom: 0;
			.prompt {
				border-top: .1rem solid #fff;
				background: #fefcec;
				font-size: .24rem;
				color: #ff9233;
				padding: .22rem .4rem .2rem .5rem;
			}

			.function_lists {
				display: flex;
				justify-content: flex-end;
				flex-flow: row wrap;
				padding-bottom: .5rem;
				background: #fff;
				.function_list{
					width: 96%;
					display: flex;
					justify-content: space-between;
					padding: .34rem .26rem .26rem .14rem;
					border-bottom: 1px solid #dcdcdc;
					.function_list_title{
						position: relative;
						display: flex;
						align-items: center;
						margin-bottom: .2rem;
						.title-icon{
							margin-right: .1rem;
							height: .4rem;
							width: .4rem;
							img{								
								width: 100%;
								height: 100%;
							}
						}
						img{
							width: .38rem;
							height: .38rem;
							margin-right: .32rem;
						}
						.item-text{
							vertical-align: top;
							height: .4rem;
							line-height: .4rem;
							font-size: .34rem;
							color: #1a1a1a;
							font-weight: 500;
						}
						.name-edit{
							width: 1.5rem;
							font-size: .34rem;
							border:none;
						}
						.iconfont{
							position: absolute;
							left: 4rem;
							color: #ccc;
						}
					}
					.function_list_option {
						display: flex;
						align-items: center;
						img {
							width: .65rem;
							height: .65rem;
						}
					}
				}
			}
			.save_modify{

			}
			.blank {
				height: .35rem;
				background: #efeff4;
			}
		}
	}
</style>